<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户账号</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />

    <!--    头像文件上传样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>

<body>

<div class="app" id="app">
    <!--    <el-container style="height: 750px; ">-->
    <!--    有一条细细的白线-->

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <div style="width: 100%;position: relative">

                <div style=";margin-bottom: 25px;">
                    <el-input
                            placeholder="请输入会员姓名"
                            clearable
                            style="width: 20%; "
                            prefix-icon="el-icon-search"
                            v-model="adminQuery.name"
                    >
                    </el-input>
                    <el-button @click="getAll()" class="dalfBut">查询</el-button>
                    <el-button type="warning" style="float: right" @click="addAndUpdate(null,1)">新增会员</el-button>
                </div>

                    <el-table  border size="medium" current-row-key="id" :data="dataList" stripe highlight-current-row>
                        <el-table-column type="index" align="center" label="序号"></el-table-column>
                        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                        <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                        <el-table-column prop="sex" label="性别" align="center"></el-table-column>
                        <el-table-column prop="idNumber" label="身份证号" align="center"></el-table-column>
                        <el-table-column  prop="avatar" label="头像" align="center">

                            <template slot-scope="{ row }">

                                <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                                     :preview-src-list=" `/photos/download?name=${row.avatar}` "
                                     :src="getImage(row.avatar)"
                                />
                                <div slot="error" class="image-slot">
                                    <img :src="imageUrl1"  style="width: auto; height: 40px; border:none;" >
                                </div>
                            </template>

                        </el-table-column>

                        <el-table-column prop="status" label="状态" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.status"
                                        active-text="启用"
                                        inactive-text="禁用"
                                        @change="updateStatus(scope.row)"
                                        active-value="true"
                                        inactive-value="false"
                                ></el-switch>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="addAndUpdate(scope.row,2)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="forbiddenUser(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页组件-->
                    <el-pagination
                            class="pagination"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
            </div>

        </el-container>
    </el-container>

    <!--2.新增修改 员工弹框-->
    <el-dialog :title="title" style="height: 750px"  :visible.sync="adminAddShow">
        <el-form :model="formData_user" :rules="rules" ref="formData_user" label-width="100px" class="demo-formData_user">
            <el-form-item  label="账号：" prop="username">
                <el-input v-model="formData_user.username"></el-input>
            </el-form-item>

            <el-form-item  label="员工姓名：" prop="name">
                <el-input v-model="formData_user.name"></el-input>
            </el-form-item>

            <el-form-item  label="头像：" prop="avatar">
                <el-upload class="avatar-uploader"
                           action="/photos/upload"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeUpload"
                           ref="upload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item  label="手机号：" prop="phone">
                <el-input v-model="formData_user.phone"></el-input>
            </el-form-item>

            <el-form-item  label="性别：" prop="sex">
                <el-radio-group v-model="formData_user.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item  label="省份证号：" prop="idNumber">
                <el-input v-model="formData_user.idNumber"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">{{sureButton}}</el-button>
                <el-button @click="resetForm('formData_user')">全部重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>


<script>
    new Vue({
        el: '#app',
        data:{
//1.主页面内容
            //显示数据
            dataList:[],
            tableData:[],

            //分页插件
            pagination: {//分页相关模型数据 1
                currentPage: 1,//当前页码1
                pageSize:5,//每页显示的记录数1
                total:0,//总记录数1
            },

            //管理员搜索内容1
            adminQuery:{
                name:""
            },

//2.弹框内容
            adminAddShow: false,
            title:"",   //弹框标题
            sureButton:"",   //弹框确定按钮 文字

            //弹框表单
            formData_user: {
                id:"",
                avatar:'',  //头像
            },

            //是否禁用（状态）
            options: [{
                value: '正常',
                label: '正常'
            },{
                value: '禁用',
                label: '禁用'

            },],

            //弹框表单（input）校验
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                idNumber: [
                    { required: true, message: '请输入省份证号', trigger: 'blur' },
                    { min: 3, max:18, message: '长度在 3 到18 个字符', trigger: 'blur' }
                ],
            },

            //图片
            imageUrl:'',   //弹框图片上传下载
            // imageUrl1:'',  //列表图片显示


        },
        created() {
            this.getAll();
        },

        methods: {

            getAll(){
                parent ="?name="+this.adminQuery.name;
                // alert(parent)
                axios.get("/users/"+this.pagination.currentPage+"/"+this.pagination.pageSize+parent).then((res)=>{

                    this.dataList=res.data.data.records
                    this.pagination.total=res.data.data.total
                    this.adminQuery.name=""
                })
            },

            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage=currentPage;
                this.getAll();
            },
            getImage (image) {
                this.imageUrl1= `/photos/download?name=${image}`
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //修改用户状态
            updateStatus(row) {
                axios.put("/users/updateUsertStatus", row).then((res) => {

                })
            },

            //1. 新增/修改表单 弹框
            addAndUpdate(row,title){
                this.imageUrl=''  //将上传图片的内容置空
                if (title==1){      //1:"新增会员" ;2:"修改会员信息"
                    this.title="新增会员"
                    this.sureButton="立即新增"
                    this.imageUrl= ''
                    this.formData_user={}
                    this.adminAddShow=true;
                }else if (title==2){
                    this.title="修改会员信息"
                    this.sureButton="立即修改"
                    console.log("测试1：")
                    console.log(row)
                    this.imageUrl= `/photos/download?name=${row.avatar}`
                    this.formData_user=row;
                    this.adminAddShow=true;
                }
            },
            //2.提交 新增/修改表单
            submitForm() {
                this.$refs.formData_user.validate((valid)=>{
                    if (valid){
                        console.log("提交的内容：")
                        console.log(this.formData_user)
                        if (this.title=="新增会员"){          //1:"新增会员" ;2:"修改会员信息"
                            axios.post("/users/add",this.formData_user).then((res)=>{
                                if(res.data.code){
                                    console.log(res.data.code);
                                    this.$message.success(res.data.msg);
                                    console.log("提交后响应得内容：")
                                    console.log(res.data)
                                }
                            }).finally(()=>{
                                //刷新父页面
                                parent.window.location.reload();
                                this.getAll();
                                this.adminAddShow=false;
                            })
                        }else if (this.title=="修改会员信息"){
                            axios.put("/users",this.formData_user).then((res)=>{
                                if (res.data.code){
                                    console.log("dddd")
                                    this.$message.success(res.data.msg);
                                    localStorage.setItem('userInfo',JSON.stringify(res.data))
                                    console.log("提交后响应得内容：")
                                    console.log(res.data)
                                }
                            }).finally(()=>{
                                this.getAll();
                                this.adminAddShow=false;
                            })
                        }
                    }else {

                    }

                })

            },

            //3.删除员工
            forbiddenUser(row) {
                this.$confirm("此操作删除当会员信息，是否继续?","提醒",{type: 'info'
                }).then(()=>{

                    axios.delete("/users/"+row.id).then((res)=>{
                        this.$message.success(res.data.msg);
                    }).finally(()=>{
                        this.getAll()
                    })
                }).catch(()=>{
                    //取消删除
                    this.$message.info("取消删除操作")
                })

            },
            //4.图片文件上传
            handleAvatarSuccess (response, file, fileList) {
                console.log("response:")
                console.log(response)
                this.formData_user.avatar=response.data

                this.imageUrl = `/photos/download?name=${response.data}`
            },
            beforeUpload (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },


        }
    })
</script>
</body>
</html>
